<template>
	<view class="page-index" :style="{ 'padding-top': menuButtonInfo.bottom + 10 + 'px' }">
		<view class="topBox" :style="{ height: menuButtonInfo.bottom + 10 + 'px','background':background }">
			<view class="topItem" :style="{ height: menuButtonInfo.bottom - menuButtonInfo.top + 'px' }">
				<view class="topBack" @click="back()"><uni-icons type="left" size="26" color="#000"></uni-icons></view>
				<view class="topTitle">立即下单</view>
				<view class="" style="opacity: 0;"><uni-icons type="left" size="28" color="#000"></uni-icons></view>
			</view>
		</view>
		<view class="projectBox">
			<view class="projectTitle">维修项目</view>
			<view class="projectTitle2">上门快修定金（可抵扣部分维修费）</view>
			<view class="priceBox">
				<view class="tips">师傅出发前可退，师傅无法维修可退</view>
				<view class="price">
					定金：
					<text style="color: #E60000;">{{ deposit || 0 }}</text>
				</view>
			</view>
		</view>
		<view class="contactBox">
			<view class="contactTitle">联系方式</view>
			<view class="contactList">
				<view class="contactItem">
					<view class="contactItemTitle">联系电话:</view>
					<view class="contactItemValue">
						<view class="contactItemValueLeft"><input type="text" v-model="form.phone" placeholder="请输入联系电话" :maxlength="11" /></view>
						<view class="contactItemValueRight"></view>
					</view>
				</view>
				<view class="contactItem">
					<view class="contactItemTitle">维修时间:</view>
					<view class="contactItemValue">
						<view class="contactItemValueLeft">立即上门</view>
						<view class="contactItemValueRight"></view>
					</view>
				</view>
				<view class="contactItem" @click="chooseLocation">
					<view class="contactItemTitle">维修地址:</view>
					<view class="contactItemValue">
						<view class="contactItemValueLeft">{{ form.address }}</view>
						<view class="contactItemValueRight"><uni-icons type="right" size="18" color="#999"></uni-icons></view>
					</view>
				</view>
			</view>
		</view>
		<view class="typeBox">
			<view class="typeTitle">维修类型</view>
			<view class="typeList">
				<view :class="[item.id == form.repair_type_id ? 'typeItemChange' : 'typeItem']" v-for="(item, index) in typeList" :key="index" @click="chooseType(item, index)">{{ item.name }}</view>
			</view>
		</view>
		<view class="faultBox">
			<view class="faultTitle">故障信息</view>
			<view class="" v-if="text" style="font-size: 24rpx;margin: 12rpx 0;line-height: 38rpx;color: #BD1D17;">{{ text }}</view>
			<view class="faultInfoBox">
				<view class="faultInfoTitle">车全景图片：</view>
				<view class="faultImageBox">
					<view class="faultImageItem" v-for="(item, index) in form.car_images" :key="index">
						<image :src="item" class="faultImage"></image>
						<image src="/static/home/close.png" class="closeImage" @click="remove(item, index, 1)"></image>
					</view>
					<view class="faultImageItem" @click="chooseImage(1)"><image src="/static/home/upload.png" class="faultImage"></image></view>
				</view>
			</view>
			<view class="faultInfoBox">
				<view class="faultInfoTitle">车故障图片：</view>
				<view class="faultImageBox">
					<view class="faultImageItem" v-for="(item, index) in form.fault_images" :key="index">
						<image :src="item" class="faultImage"></image>
						<image src="/static/home/close.png" class="closeImage" @click="remove(item, index, 2)"></image>
					</view>
					<view class="faultImageItem" @click="chooseImage(2)"><image src="/static/home/upload.png" class="faultImage"></image></view>
				</view>
			</view>
			<view class="faultInfoBox">
				<view class="faultInfoTitle">备注说明：</view>
				<view class="textareaBox"><textarea placeholder="请输入故障具体问题，方便维修师傅携带工具和配件" style="width: 100%;" v-model="form.remark" /></view>
			</view>
		</view>
		<view class="fixedBox">
			<view class="fixedLeft">
				<view class="price">¥{{ deposit || 0 }}</view>
				<view class="fixedTips">待支付金额</view>
			</view>
			<view class="fixedRight" @click="submit()">确认支付</view>
		</view>
	</view>
</template>

<script src="./page.js"></script>
<style>
page {
	background: #f5f5f5;
}
</style>
<style scoped lang="scss">
@import 'page.scss';
</style>
